<template>
  <!-- 标题 -->
  <div id="intelligentInput" v-loading="submitLoading">
    <div>Persona & Prompt</div>
    <!-- <el-input class="titleVal" size="large" v-model="titleVal" placeholder="Persona & Prompt" /> -->
    <!-- 内容 -->
    <el-input
      class="contentVal"
      v-model="contentVal"
      type="textarea"
      placeholder="Design the bot's persona, features and workflows just with natural language."
      @blur="handleBlur"
    />
    <!-- <el-select v-model="selectValue" class="mt-2" placeholder="请选择" size="large">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select> -->
  </div>
</template>
<script lang="ts" setup>
import { UpdateRobotNPC_BASE_LAW } from "@/api/cloud"
import { ElMessage } from "element-plus"
import { ref } from "vue"
import { IntelligentDataProps } from "../index.vue"

interface InterDataProps {
  category: string
  interData: IntelligentDataProps
}

const props = defineProps<InterDataProps>()

const contentVal = ref<string>(props.interData.system || "")
const submitLoading = ref<boolean>(false)

// const options = [
//   {
//     value: '1',
//     label: '基本信息生成',
//   },
//   {
//     value: '2',
//     label: '扩展信息生成',
//   },
//   {
//     value: '3',
//     label: '企业简介生成',
//   },
// ]

const handleBlur = async () => {
  if (contentVal.value === "") return
  if (contentVal.value === props.interData.system) {
    ElMessage.error("新旧数据不能一致")
    return
  }

  try {
    submitLoading.value = true
    const data = {
      id: props.interData.id,
      system: contentVal.value
    }
    const result = await UpdateRobotNPC_BASE_LAW(String(props.category).toLocaleLowerCase(), data)
    if (result.code === 200) {
      ElMessage({
        type: "success",
        message: "修改成功"
      })
    } else {
      ElMessage({
        type: "error",
        message: result.error || "提交失败"
      })
    }
  } catch (error) {
    console.error(error)
  } finally {
    submitLoading.value = false
  }
}
</script>
<style lang="scss" scoped>
.mt-2 {
  width: 100%;
}

.titleVal {
  margin-bottom: 20px;
}

::v-deep {
  .el-input__wrapper {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
  }

  .el-textarea__inner {
    padding: 20px 0px;
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    resize: none;
  }
}
</style>
